<script setup>
import { ref, reactive } from "vue";
import axios from "@/request";
import { RouterLink, RouterView } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import CryptoJS from "crypto-js";

const form = reactive({
  account: "root",
  username: "管理",
  password: "123456",
});

const test = () => {
  axios
    .get(`/api/user`)
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {});
};
const register = () => {
  // 加密密码
  const body = {
    account: form.account,
    username: form.username,
    password: encryptPassword(form.password),
  };
  axios
    .post(`/api/user/register`, body)
    .then((result) => {
      console.log(result);
    })
    .catch((err) => {});
};
const login = () => {
  // 加密密码
  const body = {
    account: form.account,
    password: encryptPassword(form.password),
  };
  axios
    .post(`/api/user/login`, body)
    .then((result) => {
      const { status, data } = result;
      if (status === 200) {
        sessionStorage.setItem("token", data.token);
      }
    })
    .catch((err) => {});
};
// 加密函数
const encryptPassword = (password) => {
  return CryptoJS.MD5(password).toString();
};
</script>

<template>
  <div class="common-layout">
    <el-form>
      <el-form-item label="账号">
        <el-input v-model="form.account" />
      </el-form-item>
      <el-form-item label="用户名" v-model="form.username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码" v-model="form.password">
        <el-input v-model="form.password" />
      </el-form-item>
    </el-form>
    <el-button @click="test">请求</el-button>
    <el-button @click="register">注册</el-button>
    <el-button @click="login">登录</el-button>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-menu-vertical-demo {
  height: 100vh;
}
</style>
